<template>
  <div class="make">
    <!-- 富文本编辑器-->
    <div class="column-dan">
      <div class="edit">
        <Editor ref="childEditor" @getElement="getElement" :height="459" :catchData="catchData"
                :htmlContent="form.emailContent"></Editor>
      </div>
      <div class="column-list">
        <h1 class="column-title">产品字段 <span @click="addColumn">添加行</span></h1>
        <ul>
          <li v-for="item,index in common.columnList" :key="index">[产品].{{item.title}} <span
            @click="addProduct(item.english,item.title)">添加</span></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
    import Editor from '@/components/ueditor/pro-wang'
    import {mapState} from 'vuex'

    export default {
        name: "MakeBtn",
        components: {Editor},
        props: ['htmlContent'],
        data() {
            return {
                form: {
                    emailContent: '',//正文内容
                },
                isNickname: false,
                currentNode: '',
                currentText: ''
            }
        },
        computed: {
            ...mapState(['common'])
        },
        methods: {
            getElement(text, val) {
                this.currentNode = val;
                this.currentText = text;
            },
            //添加内容
            addProduct(english, text) {
                if (this.currentNode) {//表格操作
                    const index = this.form.emailContent.indexOf(this.currentNode);
                    let str = this.form.emailContent.substring(0, index);
                    let str1 = this.form.emailContent.substring(index);
                    if (this.currentText) {
                        str1 = str1.replace(this.currentText, this.currentText + text);//添加
                    } else {//添加行
                        str1 = str1.replace(this.currentNode, `<td>${english}:</td><td>${text}</td>`)
                    }
                    this.form.emailContent = str + str1;
                } else {//其他区域
                    this.form.emailContent = this.form.emailContent + text;
                }
                this.$refs.childEditor.reset();
                this.$refs.childEditor.getInit(this.form.emailContent);
                this.currentNode = '';
                this.currentText = '';
            },
            //添加行
            addColumn() {
                //改变rowspan
                let tab = document.getElementById("temp-table-pro") ;
                const longTd = tab.rows[0].cells.length-1;
                let arr = this.form.emailContent.split("</tbody>");
                let str ='<tr>';
                for(let i=0;i<longTd;i++){
                    str+='<td></td>'
                }
                str+='</tr>';
                const numRowSpan = this.getTrNum( arr[0],"<tr>");
                let startStr = arr[0].replace(`rowspan="${numRowSpan}"`, `rowspan="${numRowSpan+1}"`);
                this.form.emailContent = startStr + str + "</tbody>" + arr[1];
                this.$refs.childEditor.reset();
                this.$refs.childEditor.getInit(this.form.emailContent);
            },
            init(params) {
                this.$refs.childEditor.reset();
                if (params) {//编辑
                    this.form.emailContent = params;
                    this.$refs.childEditor.getInit(this.form.emailContent);
                } else {//新增 - 初始化
                    this.form = {emailContent: ''};
                    this.start();
                }
                this.$emit('getInfoMake', this.form)
            },
            catchData(val) {
                //替换rowspan  - 统计tr行数
                const num = this.getTrNum(val,"<tr>");let str=val;
                if(val.indexOf('rowspan="22"')!=-1){
                    str = val.replace('rowspan="22"', `rowspan="${num}"`);
                }
                this.form.emailContent = str;
                this.$emit('getInfoMake', this.form)
            },
            start() {
                this.form.emailContent = '<div class="w-e-text" style="font-size: .8rem">' +
                    '<table style="table-layout:fixed;"  border="1" id="temp-table-pro"    cellspacing="0" cellpadding="1" >\n' +
                    '    <tbody>\n' +
                    '    <tr><td rowspan="22" style="vertical-align: middle">[产品图片]</td><td>Product Ename：</td><td>[英文名称]</td></tr>\n' +
                    '    <tr>\n' +
                    '        <td>Product Name：</td>\n' +
                    '        <td>[中文名称]</td>\n' +
                    '    </tr>\n' +
                    '    <tr>\n' +
                    '        <td>Product Model：</td>\n' +
                    '        <td>[产品型号]</td>\n' +
                    '    </tr>\n' +
                    '    <tr>\n' +
                    '        <td>Unit Price：</td>\n' +
                    '        <td>[产品单价]</td>\n' +
                    '    </tr>\n' +
                    '    <tr>\n' +
                    '        <td>Packaging outerBoxLong：</td>\n' +
                    '        <td>[外箱长度]</td>\n' +
                    '    </tr>\n' +
                    '    <tr>\n' +
                    '        <td>Packaging outerBoxWidth：</td>\n' +
                    '        <td>[外箱宽度]</td>\n' +
                    '    </tr>\n' +
                    '    <tr>\n' +
                    '        <td>Packaging outerBoxHigh：</td>\n' +
                    '        <td>[外箱高度]</td>\n' +
                    '    </tr>\n' +
                    '    </tbody>\n' +
                    '</table></div>';
                this.$refs.childEditor.getInit(this.form.emailContent);
            },
            getTrNum(scrstr, armstr) { //scrstr 源字符串 armstr 特殊字符
                var count = 0;
                while (scrstr.indexOf(armstr) != -1) {
                    scrstr = scrstr.replace(armstr, "")
                    count++;
                }
                return count;
            }
        }
    }
</script>

<style scoped lang="scss">
  $bgActiveColor: #E9F3FD;
  $fontColor: #2A97F9;
  $lineColor: #F3F3F3;
  .column-dan {
    display: flex;

    .edit {
      width: 100%;
    }

    .column-list {
      width: 250px;
      max-height: 509px;
      border: 1px solid #ddd;
      border-left: 0;
      position: relative;

      .column-title {
        width: 200px;
        background-color: #f3f3f3;
        padding: 5px 10px;
        border-bottom: 1px solid #ddd;
        cursor: pointer;
        font-size: 14px;

        span {
          float: right;
          color: $fontColor;
        }
      }

      ul {
        overflow-y: scroll;
        max-height: 459px;

        li {
          font-size: 12px;
          padding: 0 10px;
          color: #444;
          line-height: 29px;
          border-bottom: 1px solid #ddd;
          overflow: hidden;

          span {
            float: right;
            color: #0a6cd6;
            cursor: pointer;
          }
        }

        li:last-child {
          border-bottom: 0;
        }
      }

    }
  }
</style>
